<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<head>
  <title>
    {{lang.global.title.inventory}} | Valora | GamerNoTitle
  </title>
  {% include 'public/head.html' %}
</head>
<script src="https://uptime.betterstack.com/widgets/announcement.js" data-id="165758" async="async"
  type="text/javascript"></script>

<body class="index-page">
  {% include 'public/body.html' %}

  {% include 'public/components/announcement.html' %}

  {% include 'public/components/nav.html' %}

  {% include 'public/components/header.html' %}

  <div class="container-fluid px-0 overflow-hidden">
    <div class="row text-center py-2 mt-3">
      <div class="col-12 mx-auto">
        <a href="/market"><button type="button" class="btn bg-gradient-info btn-lg"><i class="fas fa-home"></i>
            {{lang.global.button.dailyshop}}</button></a>
        <a href="/market/night"><button type="button" class="btn bg-gradient-mint btn-lg"><i
              class="fas fa-shopping-bag"></i></i>
            {{lang.global.button.nightmarket}}</button></a>
        <a href="/market/accessory"><button type="button" class="btn bg-gradient-pink btn-lg"><i
              class="fas fa-spray-can"></i>
            {{lang.global.button.accessory}}</button></a>
        <a href="/trans"><button type="button" class="btn bg-gradient-warning btn-lg"><i class="fas fa-language"></i>
            {{lang.global.button.trans}}</button></a>
        <a href="/library/accessory"><button type="button" class="btn bg-gradient-sr-sliver-wolf btn-lg"><i
              class="fas fa-gem"></i>
            {{lang.global.button.accessorylib}}</button></a>
        <br>
        <a href="//account.riotgames.com" target="_blank"><button type="button"
            class="btn bg-gradient-secondary btn-lg"><i class="fas fa-user-circle"></i>
            {{lang.global.button.account}}</button></a>
        <a href="/library"><button type="button" class="btn bg-gradient-success btn-lg"><i class="fas fa-book"></i>
            {{lang.global.button.library}}</button></a>
        <a href="//bili33.top/sponsors" target="_blank">
          <button type="button" class="btn bg-gradient-primary btn-lg"><i class="ni ni-atom"></i>
            {{lang.global.button.sponsor}}</button></a>
        <a href="/api/logout"><button type="button" class="btn bg-gradient-danger btn-lg"><i
              class="fas fa-door-open"></i>
            {{lang.global.button.logout}}</button></a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center py-2 mt-3">
      <div class="col-12 mx-auto">
        <div class="alert alert-pink text-white rounded" role="alert">
          <span class="alert-icon"><i class="ni ni-like-2"></i></span>
          {{lang.inventory.welcome.opening}} {% if not accesstokenlogin
          %}<strong>{{player.name}}</strong>#<strong>{{player.tag}}</strong><br> {% else %} <strong>N/A</strong><br> {%
          endif %}
          {{lang.inventory.welcome.credit}} <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP.png" height=16px width=16px>
          <strong>{{player.vp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/RP.png" height=16px width=16px>
          <strong>{{player.rp}}</strong> <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/KC.png" height=16px width=16px>
          <strong>{{player.kc}}</strong><br>
          {{lang.inventory.welcome.cost}} <img
            src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/VP.png" height=16px width=16px>
          <strong>{{costVP}}</strong> <img src="https://cdn.bili33.top/gh/GamerNoTitle/Valora@master/assets/img/RP.png"
            height=16px width=16px> <strong>{{costRP}}</strong>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <h1 class="text-gradient text-primary mb-0 mt-2" align="center">{{lang.inventory.title}}</h1>
  </div>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>

  <div class="container">
    <div class="row">
      {% for weapon in weapon_list %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm rounded">
          <div class="gun-image">
            <a href="{{weapon.img|safe}}" data-fancybox="gallery">
              <img height=auto width=100% class="text-center" src={{weapon.img|safe}}>
            </a>
          </div>
          <div class="card-body">
            <h3 class="text-gradient text-primary mb-0 mt-2"><img src={{weapon.tier}} height="28px" width="28px">
              {{weapon.name|safe}}</h3>
            <h3 class="text-gradient text-dark mb-0 mt-2"><img src="/assets/img/VP-black.png" width="32px"
                height="32px"> {{weapon.unlock|replace("None","0")}}</h3>
            <br>
            {% for level in weapon.levels %}
            {% if level.displayName != '' %}
            <!-- Button trigger modal -->
            {% if level.updated %} <!-- If this level has been updated, set the color of the button to green -->
            <button type="button" class="btn bg-gradient-success" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{level.uuid|escape}}">
              {{level.displayName}}: {{level.levelItem}}
            </button>
            {% else %}
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{level.uuid|escape}}">
              {{level.displayName}}: {{level.levelItem}}
            </button>
            {% endif %}
            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{level.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{level.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    <video width=100% controls>
                      <source src="{{level.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{level.streamedVideo}}" type="video/mp4">
                      {{lang.inventory.modal.videonotavaliable}}
                    </video>
                    <br>
                    <!-- <p class="text-gradient text-danger mb-0 mt-2" align="center">请先暂停播放视频后再关闭窗口，否则视频会一直播放（这是个bug但是我还没修）
                    </p> -->
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary"
                      data-bs-dismiss="modal">{{lang.inventory.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}
            {% endfor %}
            <br>
            {% for chroma in weapon.chromas %}
            {% if chroma.displayName != '' %}
            <!-- Button trigger modal -->
            {% if chroma.updated %} <!-- if this chroma has been unlocked, set button color to green -->
            <button type="button" class="btn bg-gradient-success" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{chroma.uuid|escape}}">
              {{chroma.displayName}}
            </button>
            {% else %}
            <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal"
              data-bs-target="#WEAPON-{{chroma.uuid|escape}}">
              {{chroma.displayName}}
            </button>
            {% endif %}
            <!-- Modal -->
            <div class="modal fade" id="WEAPON-{{chroma.uuid|escape}}" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><img src={{weapon.tier}} height="28px" width="28px"> {{weapon.name|safe}}
                      {{chroma.displayName}}</h5>
                  </div>
                  <div class="modal-body">
                    {% if chroma.streamedVideo %}
                    <video width=100% controls>
                      <source src="{{chroma.streamedVideo|replace('valorant.dyn.riotcdn.net', 'cdn.val.qq.com')}}"
                        type="video/mp4">
                      <source src="{{chroma.streamedVideo}}" type="video/mp4">
                      {{lang.inventory.modal.videonotavaliable}}
                    </video>
                    <br>
                    <!-- <p class="text-gradient text-danger mb-0 mt-2" align="center">请先暂停播放视频后再关闭窗口，否则视频会一直播放（这是个bug但是我还没修）
                    </p> -->
                    {% else %}
                    <img width="100%" src="{{chroma.fullRender}}">
                    {% endif %}
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-primary"
                      data-bs-dismiss="modal">{{lang.inventory.button.close}}</button>
                  </div>
                </div>
              </div>
            </div>
            </script>
            {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% include 'public/footer.html' %}

</body>